<template>
  <div
    id="slideshow"
    :style="divStyle"
    ref="textImg"
    @mouseenter="btnShow = true"
    @mouseleave="btnShow = false"
  >
    <div :id="swiperId" class="swiper-container">
      <div class="swiper-wrapper">
        <div
          v-for="(item, index) in SlideArray"
          :key="index"
          class="swiper-slide swiper-no-swiping img-item"
        >
          <div ref="groupBox" class="group-container" :class="maginLeft ? 'margin-left' : ''">
            <div class="menu-list" v-for="item1 in item" :key="item1.groudId">
              <div class="circle-area">
                <div class="outer-circle"></div>
                <div
                  class="inner-circle"
                  :style="{
                    backgroundColor: item1.groupProperty.ctGroupBackgroundColor
                  }"
                >
                  <i
                    class="vportal"
                    :class="item1.groupProperty.ctGroupIcon"
                    :style="{ color: item1.groupProperty.ctGroupIconColor }"
                  ></i>
                </div>
              </div>
              <div class="group-name" :style="{ color: item1.groupProperty.ctGroupFontColor }">
                {{ item1.groupName }}
              </div>
              <div class="group-block">
                <ul>
                  <li v-for="item2 in item1.portlets" :key="item2.id" @click="magnetOpen(item2)">
                    <a :href="item2.portletUrl" target="_blank">
                      <span :style="{ color: item2.fontColor }">{{ item2.displayName }}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="pagination-menu" v-show="SlideShow"></div>
      <div class="control-btn left-btn" @click="handleLeft" v-show="SlideShow && btnShow">
        <span>&lt;</span>
      </div>
      <div class="control-btn right-btn" @click="handleRight" v-show="SlideShow && btnShow">
        <span>&gt;</span>
      </div>
    </div>
  </div>
</template>

<script>
  import swiper from '@/mixins/swiper';
  export default {
    name: 'TitleMenu',
    mixins: [swiper],
    props: {
      magnetData: {
        type: Array,
        default: () => []
      },
      contentWidth: { type: Number }
    },
    data() {
      return {
        swiperId: `swiper${this._uid}`,
        groupHeight: '',
        btnShow: false
      };
    },
    computed: {
      divStyle() {
        return {
          height: `${this.groupHeight}px`,
          width: `${+this.contentWidth - 50}px`
        };
      },
      containerMaxNum() {
        //50为固定减去宽度，110位左右边距，220为固定每一个分组的宽度
        let w = this.contentWidth - 50 - 110 * 2;
        let maxNum = Math.floor(w / 220);
        return maxNum;
      },
      sliderNum() {
        //50为固定减去宽度，110位左右边距，220为固定每一个分组的宽度
        let sliderTotal = Math.ceil(this.magnetData.length / this.containerMaxNum);
        return sliderTotal;
      },
      SlideShow() {
        return this.sliderNum == 1 ? false : true;
      },

      SlideArray() {
        let array = this.magnetData;
        let index = 0;
        let newArray = [];
        let subGroupLength = this.containerMaxNum;
        if (subGroupLength > 0) {
          while (index < array.length) {
            newArray.push(array.slice(index, (index += subGroupLength)));
          }
        }

        return newArray;
      },

      maginLeft() {
        return this.sliderNum == 1 ? false : true;
      }
    },
    mounted() {
      this.setHeight();
      this.$nextTick(() => {
        this.setSwiper(
          new Swiper(`#${this.swiperId}`, {
            // loop: true,
            // autoplay: false,
            // speed: 300,
            // autoplayDisableOnInteraction: false,
            // mode: 'horizontal',
            // pagination: '#pagination-menu',
            // paginationClickable: true,
            // createPagination: true,
            // onAutoplayStop: function (swiper) {
            // if (!swiper.support.transitions) {
            //   //IE7、IE8
            //   swiper.startAutoplay();
            // }
            // },
          })
        );
      });
    },
    methods: {
      magnetOpen(item) {
        if (item.portletUrlType == 'open') {
          window.open(item.portletUrl);
        }
      },

      /**
       * @description 向左调幻灯片
       */
      handleLeft() {
        this._swiper.swipePrev();
        // console.log();
      },
      /**
       * @description 向右调幻灯片
       */
      handleRight() {
        this._swiper.swipeNext();
      },
      setHeight() {
        //console.log('yyyy',this.$refs.groupBox[0].clientHeight)
        //this.groupHeight = this.$refs.groupBox[0].clientHeight;
        let height = 0;
        //console.log(this.$refs.groupBox,'@@@@');
        this.$refs.groupBox &&
          this.$refs.groupBox.forEach((item) => {
            height = item.clientHeight > height ? item.clientHeight : height;
          });
        this.groupHeight = height;
      }
    }
  };
</script>

<style scoped lang="scss">
  .menu-list {
    position: relative;
    float: left;
    width: 205px;
    padding: 12px 0;
    padding-bottom: 10px;
    margin: 0 8px;
  }

  .circle-area {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 9px auto 0;
    text-align: center;
    border-radius: 50%;

    .outer-circle {
      position: absolute;
      top: 0;
      left: 0;
      width: 118px;
      height: 118px;
      background-color: rgba(0, 0, 0, 1);
      border-radius: 50%;
      opacity: 0.06;
    }

    .inner-circle {
      position: absolute;
      top: 15px;
      right: 15px;
      bottom: 15px;
      left: 15px;
      border-radius: 50%;

      i {
        display: block;
        width: 40px;
        height: 40px;
        margin: 24px auto 0;
        font-size: 40px;
        line-height: 40px;
        color: #fff;
        vertical-align: top;
      }
    }
  }

  .group-name {
    height: 60px;
    overflow: hidden;
    font-size: 24px;
    line-height: 60px;
    color: #1f85ec;
    text-align: center;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
  }

  .group-block {
    text-align: center;

    ul {
      display: inline-block;
      max-width: 100%;
      padding: 0;
      margin: 0 auto;
      list-style: none;

      li {
        position: relative;
        height: 37px;
        font-size: 14px;
        line-height: 36px;
        text-align: left;
        cursor: pointer;

        span {
          display: block;
          width: 100%;
          overflow: hidden;
          //vertical-align: top;
          text-overflow: ellipsis;
          word-break: keep-all;
          white-space: nowrap;
        }
      }
    }
  }

  .group-container {
    overflow: hidden;
  }

  .margin-left {
    margin-left: 110px;
  }

  #slideshow {
    // width: 100%;
    // width: 300px;
    height: 100%;
    //border-radius: 10px;
    //border: 1px solid #357304;
    overflow: hidden;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    //border: 1px solid red;
    overflow: hidden;

    .swiper-wrapper {
      width: 100%;
      height: 100%;
    }

    .img-item {
      position: relative;
      width: 100%;
      height: 100%;

      a {
        display: inline-block;
        width: 100%;
        height: 100%;
      }

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
  }

  #pagination-menu {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 999;
    height: 30px;
    text-align: center;
  }

  .control-btn {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    font-size: 22px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #000;
    border-radius: 50%;
    opacity: 0.15;
  }

  .left-btn {
    left: 30px;
  }

  .right-btn {
    right: 30px;
  }

  .title-active {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
  }

  .title-active::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    width: 5px;
    background-color: #2490f8;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    content: '';
  }

  /deep/.swiper-pagination-switch {
    display: inline-block;
    width: 10px;
    height: 10px;
    // display: inline-block;
    margin-left: 10px;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 50%;
  }

  /deep/.swiper-active-switch {
    background-color: #666;
  }
</style>
